<template>
  <el-dialog
    title="选择物品"
    v-model="visible"
    width="45%"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <div class="sc-user-select">
      <div class="sc-user-select__left">
        <div class="sc-user-select__select">
          <div class="sc-user-select__tree">
            <el-scrollbar>
              <div class="search">
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="categoryFilterText"
                  clearable
                ></el-input>
              </div>
              <el-tree
                class="menu"
                ref="categoryTree"
                :data="categoryGroup"
                :node-key="groupProps.key"
                :props="groupProps"
                highlight-current
                :expand-on-click-node="false"
                :current-node-key="categoryId"
                :filter-node-method="categoryFilterNode"
                @node-click="categoryClick"
              />
            </el-scrollbar>
          </div>
          <div class="sc-user-select__user">
            <div class="sc-user-select__user__list">
              <div class="sc-user-select__search">
                <el-radio-group v-model="activeTab">
                  <el-radio-button :label="1">物品列表</el-radio-button>
                  <el-radio-button :label="2"
                    >已选（{{ selectedList.length }}）</el-radio-button
                  >
                </el-radio-group>
                <el-input
                  v-model="goodsSearchText"
                  prefix-icon="el-icon-search"
                  placeholder="物品名称"
                  clearable
                >
                  <template #append>
                    <el-button
                      icon="el-icon-search"
                      @click="searchGgoods"
                    ></el-button>
                  </template>
                </el-input>
              </div>

              <el-table
                ref="table"
                :data="goodsList"
                row-key="id"
                stripe
                border
                @selection-change="handleSelectionChange"
                v-show="activeTab == 1"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column label="物品名称" prop="name"></el-table-column>
                <el-table-column
                  label="规格型号"
                  prop="spuSpecification"
                ></el-table-column>
                <el-table-column
                  label="价格(元)"
                  prop="price"
                  width="100"
                ></el-table-column>
                <el-table-column
                  label="仓库单位"
                  prop="productUnitName"
                  width="80"
                ></el-table-column>
              </el-table>
              <el-table
                ref="table"
                :data="selectedList"
                row-key="id"
                stripe
                border
                v-show="activeTab == 2"
              >
                <el-table-column label="物品名称" prop="name"></el-table-column>
                <el-table-column
                  label="规格型号"
                  prop="spuSpecification"
                ></el-table-column>
                <el-table-column
                  label="价格(元)"
                  prop="price"
                  width="100"
                ></el-table-column>
                <el-table-column
                  label="仓库单位"
                  prop="productUnitName"
                  width="80"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  align="center"
                  width="150"
                >
                  <template #default="scope">
                    <el-button
                      text
                      type="danger"
                      size="small"
                      @click="table_del(scope.row, scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                v-model:current-page="currentPage"
                small
                layout="total, prev, pager, next"
                :page-size="limit"
                :total="goodsTotal"
                @current-change="handleCurrentChange"
                v-if="goodsTotal > 10"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="confirm()"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: 'selectGoods',
  emits: ['closed', 'selectGoods'],
  data () {
    return {
      isSaveing: false,
      visible: false,
      activeTab: 1,
      groupProps: {
        key: 'id',
        label: 'name',
        children: 'children'
      },
      categoryId: '',
      categoryGroup: [],//类型组
      goodsList: [],//物资列表
      selectedList: [],//已选物资列表
      goodsTotal: 0,
      categoryFilterText: '',
      goodsSearchText: '',
      limit: 10,//每页条数
      page: 1,//页码
      currentPage: 1,
      pageSize: 1
    }
  },
  watch: {
    categoryFilterText (val) {
      this.$refs.categoryTree.filter(val)
    }
  },
  methods: {
    open (warehouseId) {
      this.visible = true
      this.warehouseId = warehouseId
      this.getCategoryGroup()
      this.getGoodList()

    },

    // 获取分类列表
    async getCategoryGroup () {
      let { data } = await this.$API.goods.getCategoryList.get()
      this.categoryGroup = data
    },
    //组织点击
    categoryClick (data) {
      this.categoryId = data[this.groupProps.key]
      this.getGoodList(this.warehouseId)

    },
    // 搜索分类
    categoryFilterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1

    },
    // 获取物品列表
    async getGoodList () {
      let param = {
        limit: this.limit,
        page: this.page,
        categoryId: this.categoryId,
        search: this.goodsSearchText
      }
      let res = await this.$API.purchase.getGoodsList.get(param)
      let list = res.data
      list.map(item => {
        item.productBuyNum = ''
        let arr = item.productSpecs ? JSON.parse(item.productSpecs) : []
        arr.map(a_item => {
          if (a_item.price) {
            item.price = a_item.price
          }
        })
      })

      this.goodsList = list
      this.goodsTotal = res.total
    },

    // 搜索物品
    searchGgoods () {
      this.getGoodList()
    },

    // 选择物品
    handleSelectionChange (list) {
      console.log(list)
      this.selectedList = list

    },

    // 删除已选
    table_del (row, index) {
      this.selectedList.splice(index, 1)
    },
    // 确认选择
    confirm () {
      this.visible = false
      this.$emit('selectGoods', this.selectedList)
    },

    handleCurrentChange (val) {
      this.page = val
      this.getGoodList()
    }
  }
}
</script>
<style scoped>
.sc-user-select {
  display: flex;
}
.sc-user-select__left {
  width: 100%;
}

.search {
  margin: 15px;
}
.sc-user-select__right {
  flex: 1;
}

.sc-user-select__search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.el-input-group {
  width: 40%;
}

.sc-user-select__select {
  display: flex;
  border: 1px solid var(--el-border-color-light);
  background: var(--el-color-white);
}
.sc-user-select__tree {
  /* width: 200px; */
  width: 30%;
  min-height: 300px;
  border-right: 1px solid var(--el-border-color-light);
}
.sc-user-select__user {
  /* width: 200px; */
  width: 100%;
  /* height: 300px; */
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.sc-user-select__user__list {
  flex: 1;
  overflow: auto;
}
.sc-user-select__user footer {
  height: 36px;
  padding-top: 5px;
  border-top: 1px solid var(--el-border-color-light);
}
.el-table >>> .el-table__body-wrapper {
  min-height: 200px;
}

.el-pagination {
  margin: 10px 0;
}
</style>